<template>
  <div class="container">
    <div id="bj">
      <van-nav-bar
        class="bj"
        title=""
        left-text="账户登录"
        right-text="注册"
        left-arrow
        @click-left="$router.back()"
        @click-right="onClickRight"
      ></van-nav-bar>
    

    <div class="tx">
    <img :src="avatarSrc" alt="">
    <div>欢迎回来！</div>
    </div>
    </div>
    <div class="form" fixed>
      <van-form
        class="form"
        colon
        :show-error="false"
        :show-error-message="false"
        :validate-first="true"
        @submit="onSubmit"
      >
        <van-field
          v-model="name"
          label="用户名"
          left-icon="user-circle-o"
          placeholder="请输入用户名"
          name="name"
          :rules="formRules.username"
        />
        <van-field
          v-model="pwd"
          clearable
          label="密码"
          type="password"
          left-icon="edit"
          placeholder="请输入密码"
          name="pwd"
          :rules="formRules.password"
        />
        <div class="reg-btn-wrap">
          <van-button native-type="submit" class="reg-btn" type="info" block>安全登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      avatarSrc: require('@/assets/images/haitun.png'),
      avatar:'',
      name:'',
      pwd:'',
      formRules: {
        username: [
          { required: true, message: "请输入正确用户名" },
          { pattern: /^[0-9a-zA-Z\u4E00-\u9FA5\_]{2,16}$/, message: "用户名错误" },
        ],
        password: [
          { required: true, message: "请填写正确密码" },
          { pattern: /^[a-z0-9_-]{6,18}$/, message: "密码错误" },
        ],
      },
    };
  },
  methods: {
    onSubmit(values){
      console.log('表单验证成功，执行登录...',values)
      let url = '/login'
      let params = `name=${this.name}&password=${this.pwd}`
      this.axios.post(url,params).then(res=>{
        console.log('登录结果',res)
        if(res.data.code==200){
          // 登陆成功
          this.$toast({
            message:'登录成功',
            position:'bottom',
            duration:2000
          })
          this.$store.commit('loginOK',this.name)
          this.$store.commit('loginOK',this.avatar)

          this.$router.push('/home/index')
        }else{
          // 登录失败
          this.$toast({
            message:'账号密码错误，请重试！',
            position:'bottom',
            duration:2000
          })
        }
      })
    },
    onClickRight() {
      this.$router.push("/register");
    },
    async onRegister() {
      Toast.loading({
        message: "登录中...",
        forbidClick: true,
      });

    }
  },
  
};
</script>

<style lang="css">
 .van-hairline--bottom::after {
  border-bottom-width: 0px; }

.form van-form {
  border: none; }
</style>

<style lang="css" scoped>


.container #bj {
  background-color: #034fbe;
  border: none;
  position: relative;
  z-index: 0; }
  .container #bj .bj {
    height: 28vw;
    background-color: #034fbe; }
    .container #bj .bj ::v-deep .van-nav-bar__title {
      color: #fff; }
    .container #bj .bj ::v-deep .van-nav-bar__text {
      color: #fff;
      font-size: 15px; }
    .container #bj .bj ::v-deep .van-nav-bar__arrow {
      color: #fff;
      font-size: 15px; }
  .container #bj .tx {
    height: 30vw;
    background-color: #fff;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    overflow: hidden;
    text-align: center;
    border: none; }
    .container #bj .tx img {
      width: 105px;
      height: 105px;
      border-radius: 50%;
      position: absolute;
      top: 13vw;
      left: 37.2vw;
      z-index: 1; }
    .container #bj .tx div {
      font-size: 1.5em;
      position: absolute;
      top: 44vw;
      left: 37.7vw; }

.container .form {
  margin: 15px auto; }

.container .reg-btn-wrap {
  padding: 26px 16px;
  background-color: #fff; }
  .container .reg-btn-wrap .reg-btn {
    background-color: #6db4fb;
    border: none;
    border-radius: 18px; }
    .container .reg-btn-wrap .reg-btn .van-button__text {
      font-size: 15px; }

</style>